<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <h4>创建就诊卡</h4>
    <el-form :model="patientForm" :rules="rules" ref="patientForm" label-width="100px">
        <el-form-item label="病人姓名" prop="name">
            <el-input v-model="patientForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
            <el-input v-model="patientForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="家庭地址" prop="address">
            <el-input  v-model="patientForm.address"></el-input>
        </el-form-item>
        <el-form-item label="医保卡号" prop="idMedicare">
            <el-input  v-model="patientForm.idMedicare" @blur="existsIdMedicare()"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
            <el-input  v-model="patientForm.idCard" @blur="checkIdCard()"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
            <el-input v-model="patientForm.birthday" disabled></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-select v-model="patientForm.sex" disabled placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('patientForm')">保存</el-button>
            <el-button @click="resetForm('patientForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
</body>

<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                patientForm: {
                    name: '',
                    phone: '',
                    address: '',
                    isMedicare:1,
                    idMedicare: '',
                    idCard: '',
                    birthday: '',
                    sex:''
                },
                options: [{value: 1, label: '女'}, {value: 2, label: '男'}],
                idCardValidate:true,
                rules: {
                    name: [
                        { required: true, message: '病人姓名不能为空', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '手机不能为空', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '家庭地址不能为空', trigger: 'blur' }
                    ],
                    idCard: [
                        { required: true, message: '身份证号不能为空', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                existsIdMedicare(){
                    alert("dddddd")
                    let url="patientServlet"
                    let param="method=existsIdMedicare" +
                        "&idMedicare="+this.patientForm.idMedicare;
                    axios.post(url,param).then(resp=>{
                        if(resp.data.code==1002){
                            this.$message({
                                type: 'warning',
                                message: "医保卡重复，请重新添加"
                            });
                            this.patientForm.isMedicare=1;
                        }else if(resp.data.code==1001){
                            this.patientForm.isMedicare=2;
                        }
                    });
                },
                checkIdCard(){
                    let url="patientServlet"
                    let param="method=getByIdCard" +
                        "&idCard="+this.patientForm.idCard;
                    axios.post(url,param).then(resp=>{
                        if(resp.data.code==1001){
                            this.$message({
                                type: 'warning',
                                message: "身份证号重复，请重新添加"
                            });
                            //设置表单不能提交标识符
                            this.idCardValidate=false;
                            this.patientForm.birthday='';
                            this.patientForm.sex='';
                        }else if(resp.data.code==1002){
                            this.idCardValidate=true;
                            //提取出生日期和性别
                            let y=this.patientForm.idCard.substr(6,4);
                            let m=this.patientForm.idCard.substr(10,2);
                            let d=this.patientForm.idCard.substr(12,2);
                            let sex=this.patientForm.idCard.substr(16,1);
                            this.patientForm.birthday=y+'-'+m+'-'+d;
                            this.patientForm.sex=sex%2==0?'女':'男';
                        }
                    });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid&&this.idCardValidate) {
                            let url="patientServlet";
                            this.patientForm.isMedicare=this.patientForm.idMedicare==""?1:2;
                            this.patientForm.sex= this.patientForm.sex=='女'?1:2;
                            let param="method=addPatient&name="+this.patientForm.name+
                                "&birthday="+this.patientForm.birthday+
                                "&sex="+this.patientForm.sex+
                                "&address="+this.patientForm.address+
                                "&phone="+this.patientForm.phone+
                                "&idCard="+this.patientForm.idCard+
                                "&isMedicare="+this.patientForm.isMedicare;
                            if(this.patientForm.isMedicare==2){
                                param+="&idMedicare="+this.patientForm.idMedicare;
                            }
                            axios.post(url,param).then(resp=>{
                                if(resp.data.code==1006){
                                    this.$message({
                                        type: 'success',
                                        message: resp.data.msg
                                    });
                                }else if(resp.data.code==1007){
                                    this.$message({
                                        type: 'warning',
                                        message: resp.data.msg
                                    });
                                }
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        }
    );
</script>
</html>